<template>
  <div ref="wrap" :style="{width: size + 'px', height: size + 'px', perspective: (size * 3) + 'px'}">
    <div class="absolute inset-0 w-full h-full rotating" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 w-full h-full shading" :style="`transform: rotateY(90deg) translateZ(${size / 2 - 0.5}px);`">
        <img
          src=""
          class="w-full h-full image-pixelated"
        >
      </div>
      <div class="absolute inset-0 w-full h-full shading reverse" :style="`transform: translateZ(${size / 2 - 0.5}px);`">
        <img
          src=""
          class="w-full h-full image-pixelated"
        >
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      size: {
        type: [Number, String],
        required: true,
      },
    },

    mounted () {
      if (!['absolute', 'relative'].includes(getComputedStyle(this.$refs.wrap).display)) {
        this.$refs.wrap.style.display = 'relative'
      }
    },
  }
</script>

<style lang="scss" scoped>
  .image-pixelated {
    image-rendering: pixelated;
  }

  $duration: 1s;

  .rotating {
    transform: rotateY(-45deg);
    animation: $duration theme('transitionTimingFunction.in-out') infinite rotating;

    @keyframes rotating {
      0% {
        transform: rotateY(0deg);
      }

      100% {
        transform: rotateY(-90deg);
      }
    }
  }

  .shading {
    &::before {
      @apply block absolute inset-0 w-full h-full bg-black;

      content: '';
      animation: $duration theme('transitionTimingFunction.in-out') infinite dark2light;
    }

    &.reverse::before {
      animation-name: light2dark;
    }

    $light: 0%;
    $dark: 30%;

    @keyframes dark2light {
      0% {
        opacity: $dark;
      }
      100% {
        opacity: $light;
      }
    }

    @keyframes light2dark {
      0% {
        opacity: $light;
      }
      100% {
        opacity: $dark;
      }
    }
  }
</style>
